<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.8.2.js">
			
		</script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
				font-family: "微软雅黑";
				font-size:12px;
			}
			ul,li{
				list-style: none;
			}
			a{
				color:black;
				text-decoration: none;
			}
			#header{
				width:100%;
				height:30px;
				background:#eee;
				position: relative;
			}
			#send{
				float: left;
				width:100px;
				height:22px;
				padding:4px;
				font-size:12px;
				line-height: 22px;
				text-align: center;
				margin:0 250px 0 30px;
				cursor: pointer;
			}
			#send b{
				font-weight: normal;
			}
			#header #right{
				width:860px;
				overflow: hidden;
				float: right;
			}
			#right li{
				float: left;
				height:30px;
			}
			#right a{
				float: left;
				font-size:12px;
				padding:0 18px;
				line-height: 12px;
				margin-top:9px;
				border-right:1px solid #ccc;
			}
			#right a:hover{
				color:red;
			}
			.register{
				color:red;
				margin-left:6px;
				padding:0 2px;
			}
			#right .noline{
				border:0;
			}
			#send_address{
				width:300px;
				position: absolute;
				left:30px;
				top:30px;
				background:white;
				border:1px solid #eee;
				padding:8px;
				display: none;
				z-index: 2;
			}
			#send_address li{
				float: left;
				padding:2px 14px;
			}
			#send_address li a{
				float: left;
				font-size: 12px;
				padding:2px 4px;
			}
			.change_bg{
				background:white;
			}
			.achange_bg{
				color:red;
				background:#eee;
			}
			.select{
				color:white;
				background:#b61d1d;
			}
			#my_jd{
				width:200px;
				background:url(img/my.png) no-repeat left top;
				border:1px solid #eee;
				position: absolute;
				left:646px;
				top:30px;
				display:none;
			}
			#my_jd a:hover{
				color:red;
			}
			#my_jd dl{
				margin:24px 0 26px 80px;
			}
			#my_jd dt{
				font-weight: bold;
				margin:0 0 4px 6px;
			}
			#my_jd dd a{
				margin:0 6px;
			}
			#my_jd li{
				width:90px;
				float:left;
				padding:4px 0 4px 10px;
			}
			#nav_list{
				width:1200px;
				position: absolute;
				left:40px;
				top:30px;
				padding:8px 0;
				background:white;
				border:1px #ccc solid;
				display: none;
				z-index: 2;
			}
			#nav_list a:hover{
				color:red;
			}
			#nav_list div{
				width:296px;
				border-right:1px solid #ccc;
				float:left;
				
			}
			#nav_list h3{
				font-size:14px;
				margin:10px 20px;
			}
			#nav_list li{
				float: left;
				margin:0 0 10px 20px;
				width:75px;
			}
			#nav_list .noline{
				border:0;
			}
			#left{
				width:250px;
				position: absolute;
				left:40px;
				top:100px;
			}
			#left h2{
				width:100%;
				height:34px;
				font-weight: normal;
				background:#8B0000;
				text-align: center;
				line-height: 34px;
				color:white;
				font-size:16px;
			}
			#left h3{
				width:230px;
				height:30px;
				font-weight: normal;
				background:#B61D1D;
				line-height: 30px;
				color:white;
				padding:0 10px;
				font-size:14px;
				cursor: pointer;
			}
			#left span{
				float:right;
			}
			.left_list{
				position: absolute;
				left:290px;
				top:100px;
				background:white;
				width:800px;
				border:1px solid #ccc;
				padding:20px;
				display:none;
				z-index: 1;
			}
			.left_list span{
				float: left;
				width:80px;
				height:20px;
				padding-left:4px;
				color:white;
				line-height: 20px;
				background:#ccc;
				margin-right:10px;
			}
			
			.left_list span b{
				float:right;
				text-align: center;
				width:20px;
				height:20px;
				background:#999;
			}
			.left_list dl{
				float: left;
				width:700px;
				margin:10px 0;
			}
			.left_list dl a:hover{
				color:red;
			}
			.left_list dt{
				float:left;
				font-weight: bold;
				margin-right:10px;
			}
			.left_list b{
				margin-left:10px;
			}
			.left_list dd{
				float: left;
				border-right:1px solid #ccc;
				padding:0 10px;
			}
		</style>
	</head>
	<script type="text/javascript">
		$(function(){
			var timer,timer1;
			$("#send").on({
				mouseover:function(){
								$(this).css("background","white");
								$("#send_address").show();
						},
				mouseout:function(){
							$(this).css("background","");
							$("#send_address").hide();
						}
			})
			$("#send_address").on("mouseover mouseout",function(){
				$(this).toggle();
				$("#send").toggleClass("change_bg")
			})
			$("#send_address a").on({
				mouseover:function(){
					$(this).addClass("achange_bg")
				},
				mouseout:function(){
					$(this).removeClass("achange_bg");
				},
				click:function(){
					$(this).addClass("select").parent().siblings().children("a").removeClass("select");
					console.log($(this).text());
					$("#send b").text($(this).text())
				}
			})
			
			Toggle("#right li:eq(2)","#my_jd")
			Toggle("#my_jd","#my_jd");
			Toggle("#right li:eq(8)","#nav_list")
			Toggle("#nav_list","#nav_list")
			
			for(var i=0;i<$("#left h3").length;i++){
				Toggle("#left h3:eq("+i+")","#left_list"+(i+1)+"")
			}
			
			for(var i=0;i<$("#left h3").length;i++){
				Toggle("#left_list"+(i+1)+"","#left_list"+(i+1)+"")
			}
			
			$(".left_list span").mouseover(function(){
				$(this).css("background","#8B0000").children("b").css("background","#B61D1D").parent()
				.siblings("span").css("background","#ccc").children("b").css("background","#999")
			})
			
		})
		function Toggle(obj1,obj2,_this){
			$(obj1).mouseover(function(){
				console.log("aa");
				$(obj2).show()
			}).mouseout(function(){
				$(obj2).hide()
			})
		}
	</script>
	<body>
		<div id="header">
			<span id="send">送至:<b>北京</b></span>
			<ul id="send_address">
				<li><a href="javascript:;">北京</a></li>
				<li><a href="javascript:;">上海</a></li>
				<li><a href="javascript:;">广州</a></li>
				<li><a href="javascript:;">深圳</a></li>
				<li><a href="javascript:;">天津</a></li>
				<li><a href="javascript:;">重庆</a></li>
				<li><a href="javascript:;">河北</a></li>
				<li><a href="javascript:;">山西</a></li>
				<li><a href="javascript:;">河南</a></li>
				<li><a href="javascript:;">辽宁</a></li>
				<li><a href="javascript:;">金陵</a></li>
				<li><a href="javascript:;">山东</a></li>
				<li><a href="javascript:;">云南</a></li>
				<li><a href="javascript:;">广东</a></li>
				<li><a href="javascript:;">青岛</a></li>
				<li><a href="javascript:;">山西</a></li>
				<li><a href="javascript:;">河南</a></li>
				<li><a href="javascript:;">辽宁</a></li>
				<li><a href="javascript:;">金陵</a></li>
				<li><a href="javascript:;">山东</a></li>
				<li><a href="javascript:;">云南</a></li>
				<li><a href="javascript:;">广东</a></li>
				<li><a href="javascript:;">青岛</a></li>
				<li><a href="javascript:;">山西</a></li>
				<li><a href="javascript:;">河南</a></li>
				<li><a href="javascript:;">辽宁</a></li>
				<li><a href="javascript:;">金陵</a></li>
				<li><a href="javascript:;">山东</a></li>
			</ul>
			<ul id="right">
				<li><a class="noline" style="padding:0;" href="javascript:;">您好，请登录</a><a style="padding:0 18px 0 0;"  class="register" href="javascript:;">免费注册</a></li>
				<li><a href="javascript:;">我的订单</a></li>
				<li><a href="javascript:;">我的京东</a></li>
				<li><a href="javascript:;">京东会员</a></li>
				<li><a href="javascript:;">企业采购</a></li>
				<li><a href="javascript:;">手机京东</a></li>
				<li><a href="javascript:;">关注京东</a></li>
				<li><a href="javascript:;">客户服务</a></li>
				<li ><a class="noline" href="javascript:;">网站导航</a></li>
			</ul>
			<div id="my_jd">
				<dl>
					<dt><a href="javascript:;">你好，请登录</a></dt>
					<dd><a href="javascript:;">优惠券</a>|<a href="javascript:;">消息</a></a></dd>
				</dl>
				<ul>
					<li><a href="javascript:;">待处理的订单</a></li>
					<li><a href="javascript:;">我的关注</a></li>
					<li><a href="javascript:;">咨询回复</a></li>
					<li><a href="javascript:;">我的京豆</a></li>
					<li><a href="javascript:;">降价商品</a></li>
					<li><a href="javascript:;">我的理财</a></li>
					<li><a href="javascript:;">返修退货</a></li>
					<li><a href="javascript:;">京东白条</a></li>
				</ul>
			</div>
			<div id="nav_list">
				<div>
					<h3>特色主题</h3>
					<ul>
						<li><a href="javascript:;">待处理的订单</a></li>
						<li><a href="javascript:;">我的关注</a></li>
						<li><a href="javascript:;">咨询回复</a></li>
						<li><a href="javascript:;">我的京豆</a></li>
						<li><a href="javascript:;">降价商品</a></li>
						<li><a href="javascript:;">我的理财</a></li>
						<li><a href="javascript:;">返修退货</a></li>
						<li><a href="javascript:;">京东白条</a></li>
					</ul>
				</div>
				<div>
					<h3>特色主题</h3>
					<ul>
						<li><a href="javascript:;">待处理的订单</a></li>
						<li><a href="javascript:;">我的关注</a></li>
						<li><a href="javascript:;">咨询回复</a></li>
						<li><a href="javascript:;">我的京豆</a></li>
						<li><a href="javascript:;">降价商品</a></li>
						<li><a href="javascript:;">我的理财</a></li>
						<li><a href="javascript:;">返修退货</a></li>
						<li><a href="javascript:;">京东白条</a></li>
					</ul>
				</div>
				<div>
					<h3>特色主题</h3>
					<ul>
						<li><a href="javascript:;">待处理的订单</a></li>
						<li><a href="javascript:;">我的关注</a></li>
						<li><a href="javascript:;">咨询回复</a></li>
						<li><a href="javascript:;">我的京豆</a></li>
						<li><a href="javascript:;">降价商品</a></li>
						<li><a href="javascript:;">我的理财</a></li>
						<li><a href="javascript:;">返修退货</a></li>
						<li><a href="javascript:;">京东白条</a></li>
					</ul>
				</div>
				<div class="noline">
					<h3>特色主题</h3>
					<ul>
						<li><a href="javascript:;">待处理的订单</a></li>
						<li><a href="javascript:;">我的关注</a></li>
						<li><a href="javascript:;">咨询回复</a></li>
						<li><a href="javascript:;">我的京豆</a></li>
						<li><a href="javascript:;">降价商品</a></li>
						<li><a href="javascript:;">我的理财</a></li>
						<li><a href="javascript:;">返修退货</a></li>
						<li><a href="javascript:;">京东白条</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="left">
			<h2>全部商品分类</h2>
			<h3>家用电器<span>></span></h3>
			<h3>手机,数码,京东通信<span>></span></h3>
			<h3>电脑，办公<span>></span></h3>
			<h3>手机,数码,京东通信<span>></span></h3>
			<h3>电脑，办公<span>></span></h3>
		</div>
		<div id="left_list1" class="left_list">
			<span style="background:#8B0000">家电狂欢<b style="background:#B61D1D">></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd class="noline"><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
		</div>
		<div id="left_list2" class="left_list">
			<span style="background:#8B0000">家电狂欢<b style="background:#B61D1D">></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
		</div>
		<div id="left_list3" class="left_list">
			<span style="background:#8B0000">家电狂欢<b style="background:#B61D1D">></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
		</div>
		<div id="left_list4" class="left_list">
			<span style="background:#8B0000">家电狂欢<b style="background:#B61D1D">></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
				<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
		</div>
		<div id="left_list5" class="left_list">
			<span style="background:#8B0000">家电狂欢<b style="background:#B61D1D">></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<span>家电狂欢<b>></b></span>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
			<dl>
				<dt><a href="javascript:;">电器<b>></b></a></dt>
				<dd><a href="javascript:;">笔记本</a></dd>
				<dd><a href="javascript:;">空调</a></dd>
				<dd><a href="javascript:;">电风扇</a></dd>
				<dd><a href="javascript:;">电视</a></dd>
				<dd><a href="javascript:;">吹风机</a></dd>
			</dl>
		</div>
	</body>
</html>
